<template>
    <div class="echarts-container" ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
    import {
        onMounted,
        ref
    } from 'vue'
    import * as echarts from 'echarts'

    const chart = ref(null)
    onMounted(() => {
        const myChart = echarts.init(chart.value)
        const option = {
            title: {
                text: "一周业务数据"
            },
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis: {},
            legend: {
                orient: 'vertical',
                right: 10,
                top: 20
            },
            series: [{
                    name: ' 出库',
                    data: [10, 22, 28, 23, 19],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: '#009',
                        opacity: 0.5
                    }
                },
                {
                    name: '入库',
                    data: [25, 14, 23, 35, 10],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: '#ff0',
                        opacity: 0.5
                    },
                },
                {
                    name: '物权',
                    data: [20, 11, 20, 15, 19],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: '#888',
                        opacity: 0.5
                    },
                }
            ]
        };
        myChart.setOption(option)
    })
</script>

<style scoped>
    .echarts-container {
        width: 100%;
        height: 100%;
    }
</style>